<template>
	<view>
		<!-- una快捷键 -->
		<!-- statusBar是否包含状态栏   默认值false不加就会和状态栏嵌套在一块(wifi点亮蓝牙等信息重叠)-->
		<!-- 自定义导航 -->
		 <uni-nav-bar left-icon="back" left-text="返回" statusBar    :border="false" @clickLeft="goBack">
			<view class="flex align-center justify-center w-100">
				 所有人可见<text class="iconfont icon-shezhi"></text>
			</view>
		 </uni-nav-bar>
		 <!-- 文本域 发布信息uni-textarea: width:100%; background:#FFF;-->
		 <textarea v-model="content" placeholder="发挥才能"  class="uni-textarea px-2 border"/>
		 <!-- 图片上传选择  点击底部操作条的图片按钮才出现选择图片或拍照上传 ref 触发upload-image的chooseImage事件-->
		 <!-- show计算属性 为true  imagelist有数据那么子组建的upload-image就显示 否则没有图片就不显示 -->
		 <upload-image ref="uploadImage" :show="show"   @change="changeImage" :imageList="imageList" ></upload-image>
		 <!-- 底部操作条 -->
		 <view class="fixed-bottom bg-white flex align-center " style="height: 85rpx;">
		 	<view class="iconfont icon-caidan font-btn  animate__animated" hover-class=" animate__jello"></view>
			<view class="iconfont icon-huati font-btn animate__animated"  hover-class="animate__jello"></view>
			<!-- 点击下方的图片按钮 uploadImage没特殊意义-->
			<view class="iconfont icon-tupian font-btn animate__animated"  @click="iconClickEvent('uploadImage')" hover-class="animate__jello"></view>
			<view class="bg-main text-white ml-auto flex align-center justify-center mr-2  animate__animated" style="width: 140rpx;height: 60rpx;" hover-class="animate__jello">
				发送
			</view>
		 </view>
	</view>
</template>

<script>
	// NavBar 自定义导航栏的使用方式如何引入组件
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue'
	// 引入图片上传
	import uploadImage from '@/components/common/upload-image.vue'
	export default {
		components:{uniNavBar,uploadImage},
		data() {
			return {
				// 文本域内容
				content:"",
				// 存放子元素传进来的图片
				imageList:[],
				// 是否已经弹出提示框
				showBack:false
			}
		},
		// 监听页面返回
		onBackPress(){
			// 如果输入了内容并且还未弹窗提示是否保存
			if((this.content!=="" || this.imageList.length>0) && !this.showBack){
				// 那么就开始弹窗
				uni.showModal({
					content:"是否要保存为草稿",
					showCancel:true,
					cancelText:"不保存",
					confirmText:"保存",
					success: res=> {
						if(res.confirm) {
							 this.store()
						 //调用methods定义的本地存储的方法
						 }else{
						 	uni.removeStorage({
						 		key:"add-input"
						 	})
						 }
						// 返回上一步	
						uni.navigateBack({
							delta:1
						});
					},
					
				});
				// 并且把状态赋值为弹窗的状态
				this.showBack=true;
				return true;
			}
		},
		// 当你退出的时候点击保存数据那么把数据保存在本地存储
		// 当你再次进入该页面的时候在本地存储获取到数据进行展示 
		onLoad() {
			uni.getStorage({
			    key:'add-input',
			    success: res=> { 
			         if(res.data){
						 let result=JSON.parse(res.data)
						 console.log(result)
						 this.content=result.content
						 // 点击保存注意图片没有保存 原因是图片显示在子元素,父元素保存之后在传给子元素才行
						 this.imageList=result.imageList
					 }
			    }
			});
		},
		computed:{
			show(){
				return this.imageList.length>0
			}
		},
		methods: {
			iconClickEvent(e){
				 switch(e){
					 case 'uploadImage':
					 this.$refs.uploadImage.chooseImage()//执行子组件的打开相册的权限事件
					 break;
				 }
			},
			// 返回上一步
			goBack(){
				uni.navigateBack({
					delta:1
				})
			},
			// 子元素触发父元素事件 传输图片素材
			changeImage(e){
				console.log(e)
				this.imageList=e;
			},
			// 退出时保存操作
			store(){
				// 保存为本地数据
				let  obj={
					content:this.content,
					imageList:this.imageList
				}
				uni.setStorage({
				    key: 'add-input',
				    data: JSON.stringify(obj),
				});
			},
			
		},
		
	}
</script>

<style>
.font-btn{
	width: 86rpx;height: 86rpx;display: flex;
justify-content: center;align-items: center;font-size: 60rpx;}
</style>
